<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品页</title>
    <!-- <link rel="shortcut icon" href="javascript"> -->
    <!-- 引入favicon图标 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入初始化css -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/product.css">
    <!--  引入JS文件-->
    <script src="js/product.js"></script>
</head>
<body>
    <div class="headerNav w">
        <div class="leftNav"></div>
        <ul class="rightNav">
            <li class="lis1"><a href="#">三星官网</a> </li>
            <li class="lis2"><a href="#">盖乐世社区</a></li>
            <li class="lis3"><a href="#">三星网上商城VIP用户专属服务上线 <i class="ico_dh van-icon "></i></a> </li>
            <li class="lis4"> <i class="ico_dh van-icon"></i>400 071 8899</li>
        </ul>
    </div>
    
    <!-- 导航栏模块 start -->
    <div class="nav_box w">
        <h1><a href="index.html" class="gnb_log"></a><span data-v-f50da574="" class="hidden">Samsung</span></h1>
        <ul class="gnb_depth1" role="menubar">
            <li class="gnb__depth1-menu"><a href="#" class="gnb__depth1-link">智能手机</a></li>
            <li class="gnb__depth1-menu"><a href="#" class="gnb__depth1-link">可穿戴设备</a></li>
            <li class="gnb__depth1-menu"><a href="#" class="gnb__depth1-link">平板/电脑/储存</a></li>
            <li class="gnb__depth1-menu"><a href="#" class="gnb__depth1-link">智能产品配件</a></li>
            <li class="gnb__depth1-menu"><a href="#" class="gnb__depth1-link">电影/影音/显示器</a></li>
    
        </ul>
        <div class="gnb__sub">
            <ul class="gnb__utility">
                <li class="li_inp">
                    <input type="text" class="search_ipt" value="超级星期三">
                    <button class="van-icon search_ipt_btn"></button>
                </li>
                <li class="gwc">
                    <a href="#"><img src="images/gouwuc.svg" alt="购物车" title="购物车"></a>
                </li>
                <li class="dl_zc"> <span><a href="sign.html">登录</a></span>/<span><a href="register.html">注册</a></span></li>
            </ul>
        </div>
    </div>
    <script>
        var ipt = document.querySelector('.search_ipt')
        ipt.addEventListener('focus', function () {
            ipt.className = 'search_ipt border'
            if (ipt.value == '超级星期三') {
                ipt.value = ''
            }

        })
        ipt.addEventListener('blur', function () {
            ipt.className = 'search_ipt'
            if (ipt.value == '') {
                ipt.value = '超级星期三'
            }
        })
    </script>
    <!--头部模块  -->
    <div class="w">
        <div class="add-before">
            <span class="add_l" >
                <span><a href="#">首页</a> <i class="van-icon"></i></span>
                <span><a href="#">智能手机</a> <i class="van-icon"></i></span>
                <span><a href="#" class="jiacu">Galaxy S</a> <i class="van-icon"></i></span>
                <span><a href="#" class="jiacu ">Galaxy S21 Ultra 5G</a></span>
                 

            </span>
            <span class="add_r">
                <span> <i><img src="images/product_01.png" alt="" style="width: 25px
                ;"></i> <a href="#">收藏</a></span>
                <span> <i> <img src="images/pradoct_02.png" alt="" style="width: 25px
                ;"> </i> <a href="#">分享</a></span>
            </span>
        </div>
    </div>
    <!-- product 产品页 开始 -->
   <div class="w">
        <div class="product_box">
            <div class="product_l">
                <div class="preview_img">
                    <a href="#">
                        <img src="upload/newimg1.jpg" >
                    </a>
                   <div class="btn">
                      <div class="btn_box">
                        <span style="opacity: 1"></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                      </div>
                   </div>
                   <div class="mask"></div>
                   <div class="big">
                       <img src="upload/newimg1.jpg" alt="" class="bigImg">
                   </div>
                </div>
                <div class="jieshao">
                    <h3>【商城优势】</h3>
                    <div class="icons">
                        <a href="#"><img src="" alt="" width="55px"></a>
                       <div class="black">以旧换新</div>
                    </div>
                    <div class="icons">
                        <a href="#"><img src="" alt="" width="55px"></a>
                       <div class="black">以旧换新</div>
                    </div>
                    <div class="icons">
                        <a href="#"><img src="" alt="" width="55px"></a>
                       <div class="black">以旧换新</div>
                    </div>
                    <div class="icons">
                        <a href="#"><img src="" alt="" width="55px"></a>
                       <div class="black">以旧换新</div>
                    </div>
                    <h3 class="mt30">*以上权益仅限部分商品可享</h3>

                </div>
                    
            </div>
            <div class="product_r">
                <h4>人气推荐</h4>
                <h1>Galaxy F52 5G 薄暮黑</h1>
                <h3>￥9,699.00</h3>
                <div class="youshi">
                    <div class="youshi_l">商品优势</div>
                    <div class="youshi_r">
                        <span> <i><img src="images/product_03.png" alt=""></i> 以旧换新</span>
                        <span> <i><img src="images/product_03.png" alt=""></i> 分期0利率</span>
                        <span> <i><img src="images/product_03.png" alt=""></i> 管家服务</span>
                        <span> <i><img src="images/product_03.png" alt=""></i> 7天无理由退货</span><br>
                        <span> <i><img src="images/product_03.png" alt=""></i> 官方正品</span>
                        <span> <i><img src="images/product_03.png" alt=""></i> 免费包邮详情</span>
                        <span class="zuoshang"><a href="#">详情 <i  class="van-icon  "></i></a> </span>
                        
                    </div>
                <div class="youshi">
                    <div class="youshi_l">商品优势</div>
                    <div class="youshi_r">
                        <span class="black"> 洛阳市 2021-07-30 18:00:00 前下单</span><br>
                        <span class="black"> 预计 2021-08-01 05:00:00 前送达(预售等特殊情况除外)</span>
                    </div>
                </div>
                <div>
                    <div class="xinghao black border">
                        Galaxy S21 Ultra 5G
                    </div>
                    <div class="xinghao black">
                        Galaxy S21 Ultra 5G
                    </div>
                    <div class="xinghao black">
                        Galaxy S21 Ultra 5G
                    </div>
                </div>
            </div>
            <h1  style="font-size: 18px;">选择内存</h1>
            <div>
                <div class="xinghao black border">
                <span>12GB RAM<br>256GB ROM</span>
                </div>
                <div class="xinghao black">
                <span>12GB RAM<br>256GB ROM</span>
                </div>
                
            </div>
            <h1 style="font-size: 18px;">选择颜色</h1>
            <div class="clearfix">
                <div class="imgs clearfix">
                    <img src="https://image.samsungeshop.com.cn/goods/20210424/8f8bfb114c5b4f3a9dfabd55d855de95.jpg" alt="" width="80px">
                    <div class="btn"></div>
                    <p class="mt30 jiacu">幽夜黑</p>
                </div>
                <div class="imgs black clearfix">
                    <img src="https://image.samsungeshop.com.cn/goods/20210411/9c4be9b36ec44122a9524a55df0f22d7.jpg" alt="" width="80px">
                    <div class="btn"></div>
                    <p class="mt30 jiacu">幻影银</p>
                </div>
              
                
            </div>
            <h1 style="font-size: 18px;">管家服务 <span style="font-size: 12px; vertical-align: bottom; color: #999;">一产品一服务，非叠加</span></h1>
            <div class="xinghao black border">
                <span>6个月优惠换屏服务<br>￥199</span>
            </div>
            <div class="xinghao black">
                <span>12个月优惠换屏服务<br>￥349</span>
            </div>
            <h1 style="font-size: 18px;">分期0利率 </h1>
            <div class="xinghao black border">
                <span>至高12期0利率</span>
            </div>
            <div class="xinghao black">
                <span>不需要分期0利率</span>
            </div>
        </div>
        
   </div>
   <div class="w">
       <img src="https://image.samsungeshop.com.cn/goods/20210603/3283e3273b894fab90929971bfa3e5df.jpg" alt="">
       <img src="https://image.samsungeshop.com.cn/goods/20210415/d3a5bf60749c496094bb63430d5cd649.jpg" alt="">
   </div>
    <!--  页面底部-->
    <div class="footer ">
        <div class="footer-column">
            <div class="footer-columnw">
                <div class="footer-column-icon">
                    <div class="footer-column-items">
                        <a href="#">
                            <i class="icon"></i>
                            <span>专业客服团队 / 提供当季优惠信息</span>
                        </a>
                    </div>
                    <div class="footer-column-items">
                        <a href="#">
                            <i class="icon icon-car"></i>
                            <span>7天无理由退货15天换货</span>
                        </a>
                    </div>
                </div>
                <div class="footer-column-item">
                    <div class="footer-category">
                        <strong class="footer-category__title">产品</strong>
                        <ul>
                            <li><a href="#">智能手机</a></li>
                            <li><a href="#">可穿戴设备</a></li>
                            <li><a href="#">平板/电脑/储存</a></li>
                            <li><a href="#">智能产品配件</a></li>
                            <li><a href="#">电视/影音/显示器</a></li>
                        </ul>
    
                    </div>
                    <div class="footer-category">
                        <strong class="footer-category__title">我的三星</strong>
                        <ul>
                            <li><a href="#">我的订单</a></li>
                            <li><a href="#">我的积分</a></li>
                            <li><a href="#">优惠券</a></li>
                            <li><a href="#">个人资料</a></li>
                            <li><a href="#">收货地址</a></li>
                        </ul>
    
    
                    </div>
    
                </div>
                <div class="footer-column-item">
                    <div class="footer-category">
                        <strong class="footer-category__title">网上商城指南</strong>
                        <ul>
                            <li><a href="#">账号注册和登录 </a></li>
                            <li><a href="#"> 会员及优惠 </a></li>
                            <li><a href="#"> 订单操作 </a></li>
                            <li><a href="#"> 支付相关 </a></li>
                            <li><a href="#"> 物流相关 </a></li>
                            <li><a href="#"> 发票和售后服务 </a></li>
                        </ul>
                    </div>
                    <div class="footer-category">
                        <strong class="footer-category__title">服务支持</strong>
                        <ul>
                            <li><a href="#">关于商城</a></li>
                            <li><a href="#"> 关于三星</a></li>
                            <li><a href="#"> 售后网点查询</a></li>
                            <li><a href="#"> 联系我们</a></li>
    
                        </ul>
                    </div>
    
                </div>
            </div>
    
    
        </div>
        <div class="footer-columnr">
            <div class="mt18">
                <ul>
                    <li class="icon icon-hand"></li>
                    <li>官方正品请安心购买</li>
                </ul>
            </div>
            <div class="mt18">
                <ul>
                    <li class="icon icon-phone"></li>
                    <li>
                        <p>服务中心</p>
                        <p style="font-weight: 600; font-size: 14px;">400-071-8899 (09：00~22：00)</p>
                    </li>
                </ul>
            </div>
            <div class="group-icon">
                <ul>
                    <li style="color: #000;">关注我们</li>
    
    
                    <li>
                        <ul>
                            <a href="#">
                                <li>
                                    <div class="icon icon-wx">
    
                                    </div>
                                    公众号
                                </li>
    
                            </a>
                            <a href="#">
                                <li>
                                    <div class="icon icon-wb">
    
                                    </div>
                                    微博
                                </li>
    
                            </a>
                            <a href="#">
                                <li>
                                    <div class="icon icon-app">
    
                                    </div>
                                    下载app
                                </li>
    
                            </a>
                        </ul>
                    </li>
    
    
    
                </ul>
            </div>
        </div>
    
    
    
    </div>
    <div class="footer-bottom">
        <div class="footer-language-wrap">
            <div>
                <ul>
                    <li><a href="#">隐私政策</a></li>
                    <li><a href="#">用户协议</a></li>
                </ul>
            </div>
            <div>
                <ul>
                    <li><a href="#">© 1995-2021 三星（中国）投资有限公司 版权所有</a></li>
                </ul>
            </div>
            <div>
                <ul>
                    <li><a href="#"><i><img src="images/icon-ga.png" alt="" style="vertical-align: middle;"></i> 京公网安备
                            11010502037127号 京ICP备18036817号-2 <i><img src="images/icon-yyzz.png" alt=""
                                    style="width: 18px;"></i> 营业执照</a></li>
    
                </ul>
            </div>
            <div>
                <ul>
                    <li><a href="#">三星（中国）投资有限公司授权北京鹏泰宝尊电子商务有限公司运营三星网上商城并销售产品</a></li>
    
                </ul>
            </div>
    
    
        </div>
    </div>
    <!--footer end  -->
    
</body>
</html>